@charset "UTF-8";
@-webkit-keyframes anim1 {

    0% {
        position: absolute;
        left: 60%;
        top:320px;
    }

    10%{
        position: absolute;
        left: 60%;
        top:378px;
    }

    100% {
        position: absolute;
        left: 99%;
        top: 378px;
        width: 10px;
    }
}
@-webkit-keyframes anim2 {

    0% {
        position: absolute;
        left: 60%;
        top:320px;
    }

    10%{
        position: absolute;
        left: 60%;
        top:378px;
    }

    100% {
        position: absolute;
        left: 0;
        top: 378px;
        width: 10px;
    }
}
@-webkit-keyframes anim3 {

    0% {
        position: absolute;
        left: 84%;
        top:320px;
    }

    10%{
        position: absolute;
        left: 84%;
        top:638px;
        width: 10px;
    }

    100% {
        position: absolute;
        left: 0;
        top: 638px;
        width: 10px;
    }
}
@-webkit-keyframes anim4 {

    0% {
        position: absolute;
        left: 84%;
        top:320px;
    }

    50%{
        position: absolute;
        left: 84%;
        top:638px;
    }

    100% {
        position: absolute;
        left: 99%;
        top: 638px;
        width: 10px;
    }
}
.dot-active1,
.dot-active2,
.dot-active3,
.dot-active4{
    display: block;
    width: 5px;
    height: 5px;
    margin-left: -2px;
    border-radius: 10px;
    background: #c4ffa7;
}
.dot-active1 {
    -webkit-animation: anim1 4s linear infinite;
}
.dot-active2 {
    -webkit-animation: anim2 3s linear infinite;

}
.dot-active3 {
    -webkit-animation: anim3 4s linear infinite;
}
.dot-active4 {
    -webkit-animation: anim4 2s linear infinite;
}








* {
    margin: 0;
    padding: 0;
}

html, body {
    background: #0D1638;
}

h2 {
    color: #fff;
    display: block;
    width: 100%;
    height: 70px;
    text-align: center;
}

.server-chart {
    position: absolute;
    top: 200px;
    left: 50%;
    margin-left: -500px;
    width: 1000px;
    height: 420px;
    background: #fff;
    display: none;
    z-index: 999;
    background: rgba(30, 53, 133, 0.9);
}

.show {
    display: block;
}

.click {
    /*cursor: pointer;*/
}

.one-line .server-img {
    display: inline-block;
    width: 10%;
    height: 200px;
    border: 1px solid #FFF;
    text-align: center;
    float: left;
    margin: 0 7%;
}

.line-chart, .pie-chart {
    display: inline-block;
    width: 470px;
    height: 400px;
    /*border: 1px solid #FFF;*/
}

/*第一行*/

.one-line {
    width: 100%;
    height: 240px;
    padding: 20px 0;
}

.server-img img {
    width: 90px;
    height: 74px;
    margin-top: 20px;
}

.server-ip {
    color: #fff;
    display: block;
    margin-top: 30px;
}

/*第二行*/

.server-img {
    display: inline-block;
    width: 160px;
    height: 160px;
    border: 1px solid #FFF;
    text-align: center;
}

.virtual-img img {
    width: 90px;
    height: 74px;
    margin-top: 20px;
}

.line-8 {
    width: 1px;
    height: 30px;
    background: #fff;
    opacity: .4;
    margin-left: 45px;
}

.virtual-img {
    text-align: left;
}

ul {
    padding: 0;
    position: relative;
    height: 200px;
}

.server-8 {
    margin-left: 30px;
}

.server-3 {
    text-align: right;
}

li {
    display: inline-block;
    width: 10%;
}